<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股票模拟训练</title>
    <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/element-plus@2.3.6-index.css">
    <!-- <link rel="stylesheet" href="./css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入jquery -->
    <script src="./js/jquery-3.6.1.js"></script>
    <!-- 引入bootstrap -->
    <!-- <script src="./js/bootstrap.bundle.min.js"></script> -->
    <!-- 引入vue -->
    <script src="./js/vue@3.3.4.js"></script>
    <!-- 引入element-plus -->
    <script src="./js/element-plus@2.3.6.js"></script>
    <!-- 引入vuex -->
    <script src="./js/vuex@4.0.0.js"></script>
    <!-- 引入echarts -->
    <script src="./js/echarts@5.4.2.js"></script>
    <!-- <script src="./js/bea.js"></script> -->
    <!-- <script src="./js/westeros.js"></script> -->
    <!-- 引入datav -->
    <script src="./js/datav-vue3@lates.js"></script>
</head>

<body>
    <div id="view">
        <div class="un_start" v-if="!start">
            <el-button type="primary" @click="to_start" v-loading.fullscreen.lock="fullscreenLoading">开始股票模拟训练
            </el-button>
        </div>
        <el-container v-else>
            <el-header>
                <decoration-6 style="width:300px; height:40px;margin:30px auto;">
                </decoration-6>
                <h1>股票模拟训练</h1>
            </el-header>
            <el-container>
                <!-- 侧边栏 选择训练的数据 （股票信息及日期） -->
                <el-aside width="25%">
                    <border-box-11 title="选择训练数据">
                        </BorderBox11>
                        <!-- 选择股票数据 -->
                        <el-form :model="stock" ref="stock" label-width="140px" :rules="stockRules">
                            <el-form-item label="选择一支股票：" prop="code">
                                <el-select v-model="stock.code" placeholder="请选择">
                                    <el-option :label="item.name" :value="item.code" v-for="item, index in stockData" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="选择一个日期：" prop="date">
                                <el-date-picker v-model="stock.date" type="date" placeholder="请选择一个日期"
                                    style="margin-right: 10px;" />
                            </el-form-item>
                            <el-form-item label="随机提取数据：">
                                <el-switch v-model="random"></el-switch>
                                <el-button type="primary" size="small" @click="getStock('stock')" :loading="loading"
                                    style="margin-left: 20px;">确定</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- 资金展示 -->
                        <div class="initial_funding">
                            <p>初始资金</p>
                            <el-input v-model="initial"></el-input>
                            <p>手续费率</p>
                            <el-input v-model="premium">
                                <template #append>%</template>
                            </el-input>
                        </div>
                        <!-- 股票训练按钮组 -->
                        <div class="button_group">
                            <el-button size="small" type="success" @click="getNextKey">下一K线</el-button>
                            <el-button size="small" type="warning" @click="buy">买入</el-button>
                            <el-button size="small" type="danger">卖出</el-button>
                        </div>
                        <div class="button_group">
                            <el-button type="primary">重新训练</el-button>
                            <el-button type="danger">关闭训练</el-button>
                        </div>
                </el-aside>
                <!-- 使用echarts展示股票信息 -->
                <el-main width="74%">
                    <border-box-12>
                        <div id="main" ref="main">1111</div>
                    </border-box-12>

                    <!-- <dv-loading v-else>Loading...</dv-loading> -->
                    <!-- <decoration-6 v-else style="width:300px; height:30px;" ></decoration-6> -->
                </el-main>
            </el-container>

            <el-footer>
                <!-- 底部展示交易信息 -->
                <border-box-3 style="height: 300px;">
                    <el-tabs class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="交易记录">
                            <el-table :data="recordData">
                                <el-table-column prop="date" label="时间"></el-table-column>
                                <el-table-column prop="sale" label="操作"></el-table-column>
                                <el-table-column prop="money" label="成交价"></el-table-column>
                                <el-table-column prop="volume" label="成交量"></el-table-column>
                                <el-table-column prop="turnover" label="成交额"></el-table-column>
                                <el-table-column prop="premium" label="手续费"></el-table-column>
                                <el-table-column prop="profit" label="盈亏"></el-table-column>
                                <el-table-column prop="ratio" label="盈亏%"></el-table-column>
                                <el-table-column prop="name" label="品种名称"></el-table-column>
                                <el-table-column prop="code" label="品种代码"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="持仓品种">
                            <el-table :data="recordData">
                                <el-table-column prop="name" label="品种名称"></el-table-column>
                                <el-table-column prop="code" label="品种代码"></el-table-column>
                                <el-table-column prop="volume" label="数量"></el-table-column>
                                <el-table-column prop="money" label="成本价"></el-table-column>
                                <el-table-column prop="turnover" label="成交额"></el-table-column>
                                <el-table-column prop="premium" label="手续费"></el-table-column>
                                <el-table-column prop="profit" label="实现盈亏"></el-table-column>
                                <el-table-column prop="ratio" label="浮盈%"></el-table-column>
                                <el-table-column prop="money" label="最后价格"></el-table-column>
                                <el-table-column prop="date" label="时间"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </border-box-3>

            </el-footer>
        </el-container>
        <!-- 买入操作对话框 -->
        <el-dialog v-model="isBuy" title="买入" width="25%">
            <el-form :model="buyData" ref="record" label-position="right" class="to-record" style="top: 0;">
                <el-form-item prop="price">
                    买入价格：
                    <el-input v-model="buyData.price" disabled />元
                </el-form-item>
                <el-form-item prop="trades">
                    可买数量：{{ buyData.trades }}股
                </el-form-item>
                <el-form-item prop="count">
                    买入数量：
                    <el-input v-model="buyData.count" />股
                </el-form-item>
                <el-form-item style="justify-content: center;">
                    其他选项：
                    <el-button type="primary" @click="buyNumber(1)">全量</el-button>
                    <el-button type="success" @click="buyNumber(2)">1/2</el-button>
                    <el-button type="info" @click="buyNumber(3)">1/3</el-button>
                    <el-button type="warning" @click="buyNumber(6)">1/6</el-button>
                </el-form-item>
                <el-form-item prop="total">
                    可用资金：{{ buyData.total }}元
                </el-form-item>
                <el-form-item prop="common">
                    买入资金：
                    <el-input v-model="buyData.common" />元
                </el-form-item>
                <el-form-item style="justify-content: center;" class="function_btn">
                    <el-button type="success" @click="buy()">买入</el-button>
                    <el-button type="danger" @click="isBuy = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 卖出操作对话框 -->
        <el-dialog v-model="isSell" title="买出" width="25%">
            <el-form :model="sellData" ref="record" label-position="right">
                <el-form-item prop="money">卖出价格：
                    <el-input v-model="formData.money" />元</el-form-item>
                <el-form-item>可卖数量：{{ formData.volumes }}股</el-form-item>
                <el-form-item prop="volumes">
                    卖出数量：
                    <el-input v-model="formData.volume" @input="toupdate(formData.volume)" />股
                </el-form-item>
                <el-form-item>可用资金：{{ balance }}元</el-form-item>
                <el-form-item props="turnover">
                    卖出资金：<el-input v-model="formData.turnover" @input="toupdate1(formData.turnover)"></el-input>元
                </el-form-item>
                <el-button @click="sellNumber(1)">全量</el-button>
                <el-button @click="sellNumber(2)">1/2</el-button>
                <el-button @click="sellNumber(3)">1/3</el-button>
                <el-button @click="sellNumber(6)">1/6</el-button>
                <el-button type="danger" plain @click="getSell(formData)">买出</el-button>
                <el-button type="denger" plain @click="this.tosell = false">关闭</el-button>
            </el-form>
        </el-dialog>

    </div>
    <script src="./js/index.js"></script>
</body>

</html>